import Vue from "vue";
import VueRouter from "vue-router";
import Home from "../views/Home.vue";
import NProgress from "nprogress"; // progress bar
import "nprogress/nprogress.css"; // progress bar style
NProgress.configure({ showSpinner: false }); // NProgress Configuration

Vue.use(VueRouter);

const routes = [
  {
    path: "/",
    name: "home",
    component: Home
  },
  {
    path: "/about",
    name: "about",
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () =>
      import(/* webpackChunkName: "about" */ "../views/About.vue")
  },
  {
    path: "/charts",
    component: () =>
      import(/* webpackChunkName: "ChartsDemo" */ "../views/ChartsDemo.vue")
  },
  {
    path: "/bacc",
    name: "bacc",
    component: () => import("../views/DemoBacc.vue")
  },
  {
    path: "/my-charts",
    name: "charts",
    redirect: "/my-charts/line",
    component: () =>
      import(/* webpackChunkName: "charts" */ "../views/Charts/Index.vue"),
    children: [
      {
        path: "line",
        name: "line",
        conponent: () => import("@/views/Charts/Line.vue")
      },
      {
        path: "d3",
        name: "D3",
        conponent: () => import("@/views/Charts/D3.vue")
      },
      {
        path: "demo",
        name: "Demo",
        component: () => import("@/views/Charts/Demo.vue")
      }
    ]
  },
  {
    path: "/ariana-grande",
    name: "ArianaGrande",
    component: () => import("@/views/ArianaGrande")
  },
  {
    path: "/jsx",
    name: "JSX",
    component: () => import("@/views/VueJsx.jsx")
  },
  {
    path: "*",
    name: "404",
    component: () => import("@/views/NotFound.vue")
  }
];

const router = new VueRouter({
  routes
});

router.beforeEach((to, from, next) => {
  console.group("router.js");
  console.log(to);
  console.groupEnd();
  next();
});
router.afterEach(() => {
  // finish progress bar
  NProgress.done();
});
export default router;
